<script setup lang="ts">
import * as echarts from "echarts/core";
import { GridComponent, GridComponentOption } from "echarts/components";
import { LineChart, LineSeriesOption } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

type EChartsOption = echarts.ComposeOption<GridComponentOption | LineSeriesOption>;

let data1 = [20, 30, 50, 38];
let data2 = [50, 40, 58, 48];
let data3 = [40, 30, 50, 38];

const option: EChartsOption = {
	xAxis: [
		{
			type: "category",
			axisLabel: {
				color: "#B1CCFE"
			},
			offset: 10,
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: "#314165",
					opacity: 0.6,
					width: 1
				}
			},
			splitArea: {
				show: true,
				areaStyle: {
					color: ["#0D54F910"]
				}
			},
			data: ["8:00", "12:00", "16:00", "20:00"]
		},
		{
			type: "category",
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: "#314165",
					opacity: 0.6,
					width: 1
				}
			}
		},
		{
			type: "category",
			axisTick: {
				show: false
			},
			offset: 20,
			axisLine: {
				lineStyle: {
					color: "#314165",
					width: 3
				}
			}
		}
	],
	yAxis: {
		type: "value",
		max: 60,
		show: false,
		axisLine: {
			show: false
		}
	},
	grid: {
		bottom: "0",
		left: "5%",
		right: "5%"
	},
	series: [
		{
			data: [50, 130, 80, 118],
			type: "line",
			itemStyle: {
				color: "#FFA011"
			},
			symbol: "circle",
			symbolSize: 8,
			lineStyle: {
				color: "#5490D9",
				width: 3
			}
		}
	]
};

onMounted(() => {
	setTimeout(() => {
		const chartDom1 = document.getElementById("title1")!;
		const myChart1 = echarts.init(chartDom1);
		option && myChart1.setOption(option);
		const chartDom2 = document.getElementById("title2")!;
		const myChart2 = echarts.init(chartDom2);
		option && myChart2.setOption(option);
		const chartDom3 = document.getElementById("title3")!;
		const myChart3 = echarts.init(chartDom3);
		option && myChart3.setOption(option);
		myChart1.setOption({ series: { data: data1 } });
		myChart2.setOption({ series: { data: data2 } });
		myChart3.setOption({ series: { data: data3 } });
		window.onresize = () => {
			myChart1.resize();
			myChart2.resize();
			myChart3.resize();
		};
	}, 500);
});

const list = [1, 2, 3];
</script>

<template>
	<div class="w-full h-full flex flex-row text-white">
		<div class="w-fit h-[48%] flex flex-col justify-between m-auto text-[#B1CCFE] ml-2">
			<div class="w-[20px] text-nowrap">℃</div>
			<div class="w-[20px] text-nowrap">60</div>
			<div class="w-[20px] text-nowrap">40</div>
			<div class="w-[20px] text-nowrap">20</div>
			<div class="w-[20px] text-nowrap">0</div>
		</div>
		<div class="flex flex-row w-full h-full">
			<div class="w-1/3 h-full flex flex-col justify-center items-center" v-for="i in list" :key="i">
				<div class="h-8 w-fit relative mt-5">
					<img class="h-full" src="./assets/组54.svg" alt="" />
					<div class="absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%] whitespace-nowrap">{{ i }}#温度计</div>
				</div>
				<div :id="'title' + i" class="w-full h-full"></div>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss"></style>
